import {
  FlatList,
  View,
  Text,
  StyleSheet,
  ActivityIndicator,
  RefreshControl,
} from 'react-native';
import {useState} from 'react';

export default function App() {
  // 1. 初始数据定义
  const initialData = [
    {id: '1', title: 'Item 1'},
    {id: '2', title: 'Item 2'},
    {id: '3', title: 'Item 3'},
    {id: '4', title: 'Item 4'},
    {id: '5', title: 'Item 5'},
    {id: '6', title: 'Item 6'},
    {id: '7', title: 'Item 7'},
    {id: '8', title: 'Item 8'},
    {id: '9', title: 'Item 9'},
    {id: '10', title: 'Item 10'},
  ];

  // 2. 状态管理
  const [data, setData] = useState(initialData); // 列表数据
  const [refreshing, setRefreshing] = useState(false); // 下拉刷新状态
  const [loading, setLoading] = useState(false); // 上拉加载状态
  const [page, setPage] = useState(1); // 当前页码

  // 3. 上拉加载更多数据函数
  const fetchMoreData = () => {
    // 3.1 防止重复加载
    if (loading) return;

    // 3.2 设置加载状态为true
    setLoading(true);

    // 3.3 模拟网络请求延迟
    setTimeout(() => {
      // 3.4 页码自增
      const newPage = page + 1;
      const newData = [...data];

      // 3.5 生成新数据并添加到现有数据后面
      for (let i = 1; i <= 10; i++) {
        const index = (newPage - 1) * 10 + i;
        newData.push({
          id: `${index}`,
          title: `Item ${index}`,
        });
      }

      // 3.6 更新状态：设置新数据、更新页码、关闭加载状态
      setData(newData);
      setPage(newPage);
      setLoading(false);
    }, 1500);
  };

  // 4. 下拉刷新函数
  const onRefresh = () => {
    // 4.1 设置刷新状态为true
    setRefreshing(true);

    // 4.2 模拟网络请求延迟
    setTimeout(() => {
      // 4.3 重置数据和页码
      setData([...initialData]);
      setPage(1);
      // 4.4 关闭刷新状态
      setRefreshing(false);
    }, 1500);
  };

  // 5. 渲染底部加载指示器组件
  const renderFooter = () => {
    // 5.1 如果没有在加载中，不显示底部组件
    if (!loading) return null;

    // 5.2 返回底部加载指示器UI
    return (
      <View style={styles.footer}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text style={styles.footerText}>正在加载更多...</Text>
      </View>
    );
  };

  return (
    <FlatList
      data={data}
      renderItem={({item}) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      // 6. 下拉刷新配置
      refreshControl={
        <RefreshControl
          refreshing={refreshing} // 6.1 控制刷新状态
          onRefresh={onRefresh} // 6.2 下拉时触发onRefresh函数
          colors={['#0000ff']} // 6.3 Android加载指示器颜色
          tintColor="#0000ff" // 6.4 iOS加载指示器颜色
          title="下拉刷新..." // 6.5 iOS加载文字
          titleColor="#999999" // 6.6 iOS加载文字颜色
        />
      }
      // 7. 上拉加载配置
      onEndReached={fetchMoreData} // 7.1 滚动到底部时触发fetchMoreData函数
      onEndReachedThreshold={0.1} // 7.2 距离底部多远时触发（0-1之间，越小越接近底部）
      ListFooterComponent={renderFooter} // 7.3 底部加载组件
    />
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 20,
    backgroundColor: '#25ed72ff',
    elevation: 4,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  // 8. 底部加载样式
  footer: {
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  footerText: {
    fontSize: 16,
    color: '#666',
    marginLeft: 10,
  },
});
